<template>
    <li 
      :class="{ 
         completed: todo.completed, 
         editing: todo === editedTodo,
      }">
        <div class="view">
            <!-- 绑定完成状态 -->
            <input type="checkbox" :value="todo.completed">
            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
            <button @click="removeTodo(todo)">X</button>                    
        </div>
        <!-- 编辑待办 -->
        <EditTodo
            class="edit"
            :value="todo.title" 
            v-todo-focus="todo === editedTodo"
            @blur="doneEdit(todo)"                     
            @keyup.enter="doneEdit(todo)" 
            @keyup.escape="cancelEdit(todo)"      
        ></EditTodo>                                          
    </li>     
</template>

<script>
import { reactive, toRefs } from "vue";
import EditTodo from "./EditTodo.vue";
export default {
    props:{
        todo: {
            type: Object,
            required: true
        },
        editedTodo: Object
    },
    emits: ["remove-todo", "update:edited-todo"],
    setup(props, { emit }) {
        const state = reactive({
            beforeEditCache: "", // 缓存编辑前的title
        });
        function removeTodo(todo) {
            emit("remove-todo", todo);
        }
        function editTodo(todo) {
            state.beforeEditCache = todo.title;
            emit("update:edited-todo", todo);
        }
        function cancelEdit(todo) {
            todo.title = state.beforeEditCache;
            emit("update:edited-todo", null);
        }
        function doneEdit() {
            emit("update:edited-todo", null);
        }
        return {
            ...toRefs(state),
            removeTodo,
            editTodo,
            cancelEdit,
            doneEdit,
        };
    },
    //自定义指令
    directives: {
        "todo-focus": (el, { value }) => {
            if (value) {
                el.focus();
            }
        }
    },
    components: { EditTodo }
}
</script>

<style scoped>
.completed label {
    text-decoration: line-through;
}
.edit,
.editing .view{
    display: none;
}
.view,
.editing .edit{
    display: block;
}
</style>